<template>
	<div class="order-container">
		<template>
			<el-table :data="orderData"
				border
				style="width: 100%">
				<el-table-column prop="orderDetail"
					align="center"
					label="产品图片"
					width="130">
					<!-- 插槽作用域 -->
					<template v-slot="scope">
						<el-avatar shape="square"
							:size="80"
							fit="scale-down"
							:src="scope.row.orderDetail[0].imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="order_id"
					align="center"
					label="订单编号"
					width="180"> </el-table-column>
				<el-table-column prop="orderDetail[0].productName"
					align="center"
					label="产品名称"
					width="180"> </el-table-column>
				<el-table-column prop="orderDetail[0].quantity"
					width="100"
					align="center"
					label="数量"> </el-table-column>
				<el-table-column prop="total_fee"
					width="100"
					align="center"
					label="总价格"> </el-table-column>
				<el-table-column prop="pay_status"
					align="center"
					label="支付状态">
					<template v-slot="{row}">
						{{row.pay_status===1?"已支付":"未支付"}}
					</template>
				</el-table-column>
				<el-table-column prop="order_status"
					align="center"
					label="订单状态">
					<template v-slot="{row}">
						<span v-if="row.order_status==0">未提交</span>
						<span v-else-if="row.order_status==1">提交成功</span>
						<span v-else-if="row.order_status==2">已经取消</span>
						<span v-else-if="row.order_status==3">无效订单</span>
						<span v-else-if="row.order_status==4">交易关闭</span>
						<span v-else-if="row.order_status==5">退货</span>
					</template>
				</el-table-column>
				<el-table-column prop="opration"
					align="center"
					label="操作">
					<template v-slot="{row}">
						<el-button type="primary"
							v-hasPay="[row.pay_status,row.order_status]"
							icon="iconfont icon-chongzhi"> 去支付 </el-button>
						<el-button type="danger"
							icon="el-icon-delete"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>
<script>
import {mapActions,mapState} from "vuex"
        export default{
			directives:{
				hasPay:{
					inserted(el,binding){

						let [pay_status,order_status]=binding.value;
						let className=el.className;
						if(pay_status!==0 || order_status!==1 ){
							el.disabled=true;
							el.className=className+""+"is-disabled"
						}
					}
				}
			},
			computed:{
				...mapState(["orderData"])
			},
			methods:{
				...mapActions(["GET_ORDER_DATA"])
			},
            created(){
                this.GET_ORDER_DATA()
            },
            data(){
                return{
					 
                }
            }
        }
</script>
<style scoped lang="less">
	  
</style>
